<template>
  <div class="doctor-info">
    <van-nav-bar
      title="医生姓名"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="share-o" color="#000" size="18" />
      </template>
    </van-nav-bar>

    <main>
      <div class="my-card doc-i">
        <van-image
          round
          width="64px"
          height="64px"
          fit="fill"
          src="https://download-sdk.oss-cn-beijing.aliyuncs.com/downloads/IMDemo/avatar/Image1.png"
          class="avatar"
        ></van-image>
        <div class="doc-tit">
          <h3>医生姓名</h3>
          <h4>小刘诊所</h4>
          <h6>光武街道</h6>
        </div>
        <div class="doc-hos"><van-icon name="location-o" /> 包头市中心医院</div>
        <div class="jieshao van-multi-ellipsis--l3">
          <van-icon name="award-o" />
          颈椎病
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死

          <p @click="showIndoc = true">
            <span>查看简介</span> <van-icon name="arrow" />
          </p>
        </div>
        <van-rate
          v-model="value"
          :size="25"
          allow-half
          readonly
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
        <span class="rate-text">{{ value }}</span>
      </div>
      <div class="my-card advisory">
        <div class="adv-item">
          <div class="left">
            <van-image
              height="32px"
              width="32px"
              src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/tuwen.png"
            ></van-image>
            <div class="adv-info">
              <h4>图文咨询 <span class="price">￥15/次</span></h4>
              <p>最长48小时图文多次沟通</p>
            </div>
          </div>
          <div @click="gotoOrder(1)">
            <p class="consult">去咨询 <van-icon name="arrow" /></p>
          </div>
        </div>
        <div class="adv-item">
          <div class="left">
            <van-image
              height="32px"
              width="32px"
              src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/dinahua.png"
            ></van-image>
            <div class="adv-info">
              <h4>电话咨询 <span class="price">￥15/次</span></h4>
              <p>约定时间电话沟通更清楚</p>
            </div>
          </div>
          <div>
            <p class="consult">去咨询 <van-icon name="arrow" /></p>
          </div>
        </div>
        <div class="adv-item">
          <div class="left">
            <van-image
              height="32px"
              width="32px"
              src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/shipin.png"
            ></van-image>
            <div class="adv-info">
              <h4>视频咨询 <span class="price">￥15/次</span></h4>
              <p>视频咨询更快做出诊断</p>
            </div>
          </div>
          <div>
            <p class="consult">去咨询 <van-icon name="arrow" /></p>
          </div>
        </div>
      </div>
      <h3>评价</h3>
      <div class="common" v-for="i in 10" :key="i">
        <div class="my-card common-item">
          <header>
            <div>
              y***p
              <van-rate
                v-model="value"
                :size="4"
                allow-half
                readonly
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div>2021.03.30</div>
          </header>
          <div class="my-tags">
            <p>回复很及时</p>
            <p>解答很有帮助</p>
            <p>给了治疗建议</p>
            <p>非常热心</p>
            <p>解释的很透彻</p>
          </div>
          <div class="context"> 
            很热情很晚了还能给回复 在迷茫中给了我 方向 真的非常感谢
          </div>
        </div>
      </div>
    </main>

    <van-action-sheet v-model:show="showIndoc" title="医生简介">
      <div class="content">
        <h3><span class="dot"></span>专业擅长</h3>
        <p>
          颈椎病
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
        </p>
        <h3><span class="dot"></span>执业介绍</h3>
        <p>
          颈椎病
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
          腰椎间盘突出，骨折，骨肿瘤，膝盖，节半月板损伤，韧带损伤，腰椎狭窄，股骨头坏死
        </p>
        <h3><span class="dot"></span>执业点</h3>
        <p>郑州大学第一附属医院 心脑管内科</p>
      </div>
    </van-action-sheet>

    <van-share-sheet
      v-model:show="showShare"
      title="立即分享"
      :options="options"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default defineComponent({
  name: "DoctorInfo",

  created() {},

  setup() {
    //实例化路由
    const router = useRouter();

    //评分
    const value = ref(3.2);

    //=================================

    //是否展示动作面板
    const showIndoc = ref(false);

    ///===========================
    //是否显示分享面板
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
    ];
    //分享
    const onClickRight = () => {
      showShare.value = true;
    };
    //返回
    const onClickLeft = () => {
      router.go(-1);
    };

     //去 订单页面
    const gotoOrder=(id)=>{
         router.push({
        path: `/order/${id}`,
      });
    }

    return {
      value,
      onClickRight,
      onClickLeft,
      options,
      showShare,
      showIndoc,
      gotoOrder
    };
  },
});
</script>

<style lang="less" scoped>
.doctor-info main {
  padding: 50px 20px;
  background-color: #f6f8fa;
  text-align: left;
}
.doctor-info .my-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 12px #ebedf0;
  position: relative;
  padding: 10px;
}
.doctor-info .doc-i {
  height: 250px;
}
.doctor-info .my-card .avatar {
  position: absolute;
  left: 20px;
  top: -40px;
  border: 5px solid #fff;
}
.doctor-info .advisory {
  margin-top: 20px;
  height: 200px;
}
.doctor-info .doc-tit {
  padding-top: 20px;
  display: flex;
}
.doctor-info .doc-tit h4 {
  margin-left: 10px;
  margin-right: 10px;
}
.my-card .rate-text {
  font-size: 20px;
  font-weight: bold;
  color: #ffd21e;
  margin-left: 10px;
}
.my-card .jieshao {
  position: relative;
  margin: 10px 0;
}
.my-card .jieshao p {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  position: absolute;
  bottom: 0;
  right: 10px;
  display: flex;
  align-items: center;
  text-align: right;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 1)
  );
  color: #39a9ed;
}
.content {
  padding: 16px 16px 16px;
  text-align: left;
  font-size: 14px;
}
.content h3 {
  display: flex;
  align-items: center;
}
.content h3 .dot {
  width: 5px;
  height: 5px;
  display: inline-block;
  background: #39a9ed;
  margin-right: 10px;
}
.advisory .adv-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.advisory .adv-item .adv-info {
  margin-left: 10px;
}
.advisory .adv-item .adv-info h4 {
  margin: 0;
  padding: 0;
}
.advisory .adv-item .adv-info h4 span {
  font-size: 12px;
}
.advisory .adv-item .left {
  display: flex;
  align-items: center;
}

.advisory .adv-item .adv-info p {
  margin: 0;
  padding: 0;
  font-size: 5px;
  color: #323233;
}
.advisory .adv-item .consult {
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
  box-shadow: 0px 10px 30px 0px rgb(57 133 181 / 50%);
  border: 0 solid #0081ff;
  border-radius: 25px;
  color: #fff;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  display: inline-block;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.common {
  margin-bottom: 10px;
}
.common .common-item header {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  margin-bottom: 5px;
}
.common .common-item .my-tags {
  display: flex;
  font-size: 10px;
  flex-wrap: wrap;
}
.common .common-item .my-tags p {
  padding: 0;
  margin: 0;
  margin-bottom: 5px;

  margin-right: 20px;
}

.common .common-item .context{
  font-size: 13px;
  font-weight: bold;
}
</style>